<template>
	<view class="flex-col page">
		<view class="flex-col self-stretch">
			<MyHeader title="乘车人"></MyHeader>
			<view @click="selectRider(item)" v-if="riders.length" v-for="(item,index) in riders" :key="index"
				class="flex-row justify-between items-center section_4 view">
				<view class="flex-row items-baseline">
					<text class="font text_2">{{item.userName}}</text>
					<text class="ml-14 font_2 text_2">{{item.userPhone}}</text>
				</view>
				<image @click.stop="goEdit(item)" class="image_7" src="../svg/chengcheren1.svg" />
			</view>
			<ListisNull v-else></ListisNull>
		</view>
		<navigator url="../addAndEdit/addAndEdit"
			class="flex-col justify-start items-center self-center text-wrapper mt-207">
			<text class="font text_4">添加乘车人</text>
		</navigator>
	</view>
</template>

<script setup>
	import {
		ref,

	} from 'vue';
	import {
		getRiderAPI,
		addOrderRiderAPI
	} from '../../../../apis/taxi';
	import {
		useUserStore
	} from '@/store/useUserStore.js'
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	const status = ref('');
	const carpoolId = ref('')
	onLoad((options) => {
		status.value = parseInt(options.status, 10) || 0; // 获取 status 参数
		carpoolId.value = parseInt(options.carpoolId, 10) || 0; // 获取 carpoolId 参数

		console.log('接收到的 status:', status.value);
		console.log('接收到的 carpoolId:', carpoolId.value);
	});
	const riders = ref([])
	const userStore = useUserStore()
	const getRider = async () => {
		const res = await getRiderAPI(userStore.userInfo.id)
		riders.value = res.data
	}
	onShow(() => {
		getRider()
	})
	// 去编辑
	const goEdit = (item) => {
		uni.navigateTo({
			url: '../addAndEdit/addAndEdit?formP=' + JSON.stringify(item)
		})
	}
	const selectRider = async (item) => {
		console.log(item);
		const res = await addOrderRiderAPI({
			id: item.id,
			carpoolId: carpoolId.value,
			userId: userStore.userInfo.id,
			userPhone: item.userPhone,
			userNickName: item.userName,
		})
		if (res.code) {
			uni.navigateBack();
		}

	}
</script>

<style scoped>
	.ml-5 {
		margin-left: 10rpx;
	}

	.ml-11 {
		margin-left: 22rpx;
	}

	.mt-207 {
		margin-top: 414rpx;
	}

	.page {
		padding-bottom: 656rpx;
		background-color: #f7f8fa;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.section {
		padding: 36rpx 12rpx 42rpx 34rpx;
		background-image: linear-gradient(180deg, #4c8eef 0%, #84bbd900 100%);
	}

	.group {
		padding-left: 36rpx;
		padding-right: 16rpx;
	}

	.text {
		color: #333333;
		font-size: 30rpx;
		font-family: SFProText;
		font-weight: 600;
		line-height: 21.78rpx;
	}

	.image {
		width: 34rpx;
		height: 22rpx;
	}

	.image_2 {
		width: 30rpx;
		height: 22rpx;
	}

	.image_3 {
		width: 48rpx;
		height: 22.66rpx;
	}

	.group_2 {
		padding: 20rpx 0 12rpx;
	}

	.image_4 {
		width: 18rpx;
		height: 34rpx;
	}

	.pos_2 {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.section_2 {
		padding: 12rpx 24rpx;
		background-color: #ffffff99;
		border-radius: 50rpx;
		border-left: solid 1rpx #97979733;
		border-right: solid 1rpx #97979733;
		border-top: solid 1rpx #97979733;
		border-bottom: solid 1rpx #97979733;
	}

	.pos {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.image-wrapper {
		width: 38rpx;
	}

	.image_6 {
		width: 38rpx;
		height: 14rpx;
	}

	.section_3 {
		background-color: #33333333;
		width: 1rpx;
		height: 37rpx;
	}

	.image_5 {
		width: 34rpx;
		height: 34rpx;
	}

	.section_4 {
		padding: 34rpx 52rpx;
		background-color: #ffffff;
		border-radius: 12rpx;
	}

	.view {
		margin: 8rpx 24rpx 0;
	}

	.font {
		font-size: 32rpx;
		font-family: SourceHanSansCN;
		line-height: 29.82rpx;
		color: #333333;
	}

	.font_2 {
		font-size: 32rpx;
		font-family: SourceHanSansCN;
		line-height: 24.28rpx;
		color: #333333;
	}

	.text_2 {
		opacity: 0.9;
	}

	.text_3 {
		color: #333333;
		font-size: 36rpx;
		font-family: SourceHanSansCN;
		line-height: 33.66rpx;
	}

	.image_7 {
		width: 48rpx;
		height: 48rpx;
	}

	.view_2 {
		margin: 20rpx 24rpx 0;
	}

	.text-wrapper {
		padding: 28rpx 0;
		background-color: #4c8eef;
		border-radius: 56rpx;
		width: 578rpx;
	}

	.text_4 {
		color: #ffffff;
		line-height: 29.96rpx;
	}
</style>